<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
  <script>axios.defaults.withCredentials = true;</script>
  <script>
    axios.interceptors.request.use(function(config){
    // console.log(config)
    // config.headers.token = localStorage.token;
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.token;
    return config;
  })
  </script>
</head>

<body>
  <form id="defForm" method="POST" action="/upload" onsubmit="defFormTodo()">
    <p>选择文件：<input name="ffile" type="file" /></p>
    <p>First name: <input type="text" name="fname" value="a"></p>
    <p>Last name: <input type="text" name="lname" value="a"></p>
    <input id="defBtn" type="submit" value="提交 - 默认">
  </form>

  <form method="POST" action="/upload" enctype="multipart/form-data">
    <p>选择文件：<input name="ffile" type="file" /></p>
    <p>First name: <input type="text" name="fname" value="a"></p>
    <p>Last name: <input type="text" name="lname" value="a"></p>
    <input id="mulBtn" type="submit" value="提交 - multipart">
  </form>

  <form method="POST" action="/upload" enctype="multipart/form-data">
    <p>选择文件：<input name="f1file" type="file" /></p>
    <p>选择文件：<input name="f2file" type="file" /></p>
    <p>First name: <input type="text" name="fname" value="a"></p>
    <p>Last name: <input type="text" name="lname" value="a"></p>
    <input id="mulBtn" type="submit" value="提交 - 多input file">
  </form>

  <form method="POST" action="/upload" enctype="multipart/form-data">
    <p>选择文件：<input name="ffile" type="file" multiple="multiple" /></p>
    <p>First name: <input type="text" name="fname" value="a"></p>
    <p>Last name: <input type="text" name="lname" value="a"></p>
    <input type="submit" value="提交 - 多文件上传">
  </form>


  <p>
    <input id="loginBtn" type="submit" value="登陆">
    <input id="unloginBtn" type="submit" value="退出登陆">
    <input id="aBtn" type="submit" value="提交 - json">
    <input id="getBtn" type="submit" value="提交 -get json">
    <input id="bBtn" type="submit" value="提交 - multipart">
    <input id="cBtn" type="submit" value="提交 - urlencoded">
  </p>

  <p>
    <button id="proxyBtn">Proxy Get请求</button>
    <button id="proxyLogin">Proxy Post请求</button>
  </p>
  <div>
    <input type="text" id="content" />
    <input type="button" value="发送" id="send" />
    <input type="button" value="关闭" id="close" />
  </div>
</body>
<script>
  function defFormTodo(ev) {
    ev.preventDefault()
    return false;
  }

  loginBtn.onclick = function () {
    axios.post('/login')
      .then(function (response) {
        console.log(response);
        localStorage.token = response.data.token;
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  unloginBtn.onclick = function () {
    delete localStorage.token;
  }

  proxyBtn.onclick = function () {
    axios.get('/proxy/style')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  proxyLogin.onclick = function () {
    axios.post('/proxy/login')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  aBtn.onclick = function () {
    axios.post('/user/login?a=b&b=c', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  getBtn.onclick = function () {
    axios.get('/user/login', {
        params: {
          id: 12345,
          name: 'user'
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }


  bBtn.onclick = function () {
    let formData = new FormData()
    formData.append('name', 'a')
    formData.append('age', 'b')
    formData.append('file', 'c')
    let config = {
      // headers: {
      //   'Content-Type': 'multipart/form-data'
      // }
    }

    axios.post('/user', formData, config)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

  }


  cBtn.onclick = function () {

    axios({
        url: '/user/info',
        method: 'post',
        data: {
          relevanceId: 1,
          pictureType: 4
        },
        // transformRequest: [function (data) {
        //   let ret = ''
        //   for (let it in data) {
        //     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        //   }
        //   return ret
        // }],
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }
</script>
<script type="text/javascript">
  /* 封装 WebSocket 实例化的方法  */
  var CreateWebSocket = (function () {
    return function (urlValue) {
      if (window.WebSocket) return new WebSocket(urlValue);
      if (window.MozWebSocket) return new MozWebSocket(urlValue);
      return false;
    }
  })();
  /* 实例化 WebSocket 连接对象, 地址为 ws 协议 */
  var webSocket = CreateWebSocket("ws://localhost:1029");
  /* 接收到服务端的消息时 */
  webSocket.onmessage = function (msg) {
    console.log("服务端说:" + msg.data);
  };
  /* 关闭时 */
  webSocket.onclose = function () {
    console.log("关闭连接");
  };
  /* 发送消息 */
  document.getElementById("send").onclick = function () {
    var str = document.getElementById("content").value;
    webSocket.send(str);
  }
  /* 关闭消息 */
  document.getElementById("close").addEventListener("click", function () {
    webSocket.close();
  });
</script>

</html>